import "./index.css";
import D from './js/dom'
import { getLocalList } from "./utils";
((document) => {
  const btn = document.getElementsByTagName("button")[0];
  const circle = document.getElementsByClassName("circle")[0];
  const listWarpper = document.getElementsByClassName("list-warpper")[0];
  const submit = listWarpper.getElementsByClassName('sub-btn-item');
  const list = [
    { title: "谢谢惠顾", img: "https://zwcutie.com/imgs/img5.png", p: 70 },
    { title: "京东10代金券", img: "https://zwcutie.com/imgs/img1.png", p: 60 },
    { title: "京东20代金券", img: "https://zwcutie.com/imgs/img2.png", p: 50 },
    { title: "京东50代金券", img: "https://zwcutie.com/imgs/img3.png", p: 40 },
    { title: "京东100代金券", img: "https://zwcutie.com/imgs/img4.png", p: 30 },
    { title: "京东200代金券", img: "https://zwcutie.com/imgs/img6.png", p: 20},
    { title: "京东500代金券", img: "https://zwcutie.com/imgs/img7.png", p: 10 },
    { title: "IPHONE13", img: "https://zwcutie.com/imgs/img8.png", p: 5 }
  ];
  const data = getLocalList().length ? getLocalList() : list;
  const circleClass = new D(data);
  const init = () => {
    bindEvent();
  };

  function bindEvent() {
       btn.addEventListener("click", handerClick, false);
    circle.addEventListener('transitionend', handlerAnimateEnd, false);
    circleClass.rendom(circle);
    circleClass.rendomList(listWarpper);
    const oInput = listWarpper.querySelectorAll('.sub-input-item');
    submit[0].addEventListener('click', handlerCapture, false);
  };

  function handlerAnimateEnd() {
    circleClass.result();
  };
  function handerClick() {
    circle.style.transform = `rotate(0deg)`;
    circle.style.transition = "none";
    circleClass.write();
    setTimeout(() => {
      const lucky = circleClass.lucky();
      const angle = -(lucky * 45 + 22.5) + 360 * 5;
      circle.style.transition = "all 3s ease-in-out";
      circle.style.transform = `rotate(${angle}deg)`;
    }, 17);
  };
  function handlerCapture(e) {
    circleClass.handerData(e);
    circleClass.write();
    circleClass.rendom(circle);
    circleClass.rendomList(listWarpper);
    submit[0].addEventListener('click', handlerCapture, false);
  }
  init();
})(document);